<template>
  <page-wrap title="搜索" back hideTab stayStill contentWrapColor="#FFFFFF">
    <view class="search">
      <view class="input-box">
        <view class="input-box-wrap">
          <text class="icon icon-search"></text>
          <u-input
            v-model="keyword"
            class="search-input"
            placeholder="搜索您感兴趣的报告和案例"
            placeholder-style="color: #999999;"
            shape="circle"
            :border="false"
            clearable
            @input="handleInput"
            @confirm="handleSearch"
          ></u-input>
        </view>
      </view>
      <LocalSearchHistory
        ref="search"
        localKey="librarySearchHistory"
        hideTitle
        @tagClick="handleTagClick"
      />

      <view v-show="keyword" class="kw-options">
        <view
          class="option"
          v-for="item in kwOptions"
          :key="item.activityId"
          @click="handleSearch(item)"
        >
          <HighLight :keyword="keyword" :text="item.activityName" />
        </view>
        <view v-show="loadEnd" class="end-tips"> 已经到底啦~ </view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import LocalSearchHistory from "../components/LocalSearchHistory.vue";
import HighLight from "../components/HighLight.vue";

import { debounce } from "@/utils/handle";

import {
  getLibrarySearchRankList,
  getKeywordSearchList,
} from "@/api/modules/library";

const that = this;
export default {
  components: {
    LocalSearchHistory,

    HighLight,
  },
  data() {
    return {
      isFold: true,
      list: [],
      kwOptions: [],
      keyword: "",
      mostList: [],
      recommendList: [],
      latestList: [],
      loadEnd: false,
      from: "",
      str: "",
      serviceId: "",
      serviceRecordId: "",
    };
  },
  onLoad(opt) {
    this.from = opt.from || "";
    this.str = opt.str || "";
    this.serviceId = opt.serviceId || "";
    this.serviceRecordId = opt.serviceRecordId || "";
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getLibrarySearchRankList().then((res) => {
        if (res.code == 200) {
          this.mostList = res.data.mostPersonView;
          this.recommendList = res.data.officialRecommend;
          this.latestList = res.data.latestPublish;
        }
      });
    },
    handleInput: debounce(function () {
      this.getKwOptions();
      this.kwOptions = [];
    }, 500),
    getKwOptions() {
      if (!this.keyword) return;
      if (this.keyword.length < 2) return;

      const params = {
        keyword: this.keyword,
      };

      this.loadEnd = false;

      getKeywordSearchList(params)
        .then((res) => {
          if (res.code == 200) {
            let list = res.data || [];
            this.kwOptions = list;
          }
        })
        .finally(() => {
          this.loadEnd = true;
        });
    },
    handleSearch(item) {
      if (!item) return;
      let word = item.activityName || item;
      this.$refs.search.saveHistory(word);
      uni.navigateTo({
        url: `/pagesSub/library/search/result?keyword=${word}&from=${this.from}&str=${this.str}&serviceId=${this.serviceId}&serviceRecordId=${this.serviceRecordId}`,
      });
    },
    handleTagClick(keyword) {
      this.keyword = keyword;
      this.getKwOptions();
      this.handleSearch(keyword);
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  position: relative;
  flex: 1;
  background-color: #ffffff;
  .input-box {
    margin-bottom: 48rpx;
    &-wrap {
      display: flex;
      align-items: center;
      margin: 0 32rpx;
      background-color: #f7f8fa;
      border-radius: 40rpx;
      padding-left: 32rpx;

      .icon-search {
        width: 48rpx;
        height: 48rpx;
        background-image: url($img-base + "common/search_2.png");
      }
      .search-input {
        display: inline-block;
        padding: 5rpx 0;
        width: 580rpx;
      }
    }
  }

  .history {
    margin-bottom: 32rpx;
    padding-left: 32rpx;
    &-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 38rpx;
      margin-right: 32rpx;
      color: #333333;
      font-weight: 500;
      font-size: $uni-font-size-lg;
      .icon-delete {
        margin-top: 6rpx;
        width: 44rpx;
        height: 44rpx;
        background-image: url($img-base + "library/delete.png");
      }
    }

    &-list {
      .tag {
        display: inline-block;
        margin: 0 32rpx 24rpx 0;
        background: #f1f1f1;
        padding: 6rpx 16rpx;
        color: #333333;
        border-radius: 4rpx;
      }
    }
  }

  .scroll-view {
    display: flex;
    margin-top: 32rpx;
    height: 900rpx;
    .rank-c:nth-child(1) {
      margin-left: 32rpx;
    }
  }

  .kw-options {
    position: absolute;
    top: 100rpx;
    bottom: 0;
    width: 100%;
    z-index: 1;
    background-color: #ffffff;
    overflow-y: scroll;

    .option {
      margin: 0 32rpx;
      padding: 36rpx 0;
      border-bottom: 2rpx solid #f1f1f1;

      &:last-child {
        border: none;
      }

      .high-light {
        color: #ff7731;
      }
    }

    .end-tips {
      padding: 32rpx 0;
      font-size: $uni-font-size-nor;
      color: #bfbfbf;
      text-align: center;
    }
  }
}
</style>
